<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ include file="/WEB-INF/component/commonTagLib.jsp" %>

    
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title><spring:message code="message.lable.proddruginfoSTDdetail"/></title>
<%@ include file="/WEB-INF/component/commonCSS.jsp" %> 

<style type="text/css">
    	div.col-sm-3.text-left,div.col-sm-5.text-left,div.col-sm-10.text-left{
    	    color:#949494;
    	}
    	label.checkLong *{
    		vertical-align: middle;
    		margin: 0px;
    	}
</style>
</head>
<body class="skin-blue-light sidebar-mini fixed skin-blue-light-frame">
    
    <section class="content-header">
        <h1>申报缺货药品</h1>
         <ol class="breadcrumb">
            <li><a href="${ctx}/home.jsp"><i class="fa fa-home"></i><spring:message code="message.lable.first"/></a></li>
              <li><a href="#">交易</a></li>
              <li><a href="#">缺货申报</a></li>
              <li><a href="#">申报缺货药品</a></li>
        </ol> 
    </section>
    
    <section class="content">
        <div class=" box box-success">
            <!-- form start -->
            <form role="form" id="form" class="form-horizontal"  method="post">
            	<input hidden name='qualityspecCode' value='<c:out value="${detail.qualityspecCode}" />' >
            	
                <div class="box-body">
	                <div class="form-group form-group-xs">
	                        <label class="col-sm-2 text-right">品规编码<spring:message code="message.yanZheng.maoHao"/></label>
	                        <div class="col-sm-3 text-left">
	                            <c:out value="${detail.qualityspecCode}" />
	                        </div>
	                        <label class="col-sm-3 text-right"><spring:message code="message.listForm.tongYongMing"/><spring:message code="message.yanZheng.maoHao"/></label>
	                        <div class="col-sm-3 text-left">
	                           <c:out value="${detail.qualityspecName }" />
	                        </div>
	                 </div>
	                 <div class="line"></div>
	                  <div class="form-group form-group-xs">
	                        <label class="col-sm-2 text-right"><spring:message code="message.listForm.jiXing"/><spring:message code="message.yanZheng.maoHao"/></label>
	                        <div class="col-sm-3 text-left">
	                           <c:out value="${detail.formName }" />
	                        </div>
	                        <label class="col-sm-3 text-right"><spring:message code="message.listForm.guiGe"/><spring:message code="message.yanZheng.maoHao"/></label>
	                        <div class="col-sm-3 text-left">
	                           <c:out value="${detail.specName }" />
	                        </div>
	                  </div>
	                   
	                    <div class="line"></div>
	                    <div class="form-group form-group-xs">
	                       <label class="col-sm-2 text-right">缺货数量<spring:message code="message.yanZheng.maoHao"/></label>
	                            <div class="col-sm-3 text-left">
	                              	<input type="number" id="count" name="count" style='width: 109px;' />
	                            </div>
	                   </div>
	                   <div class="line"></div>
	                   <div class="form-group form-group-xs">
                            <label class="col-sm-2 text-right">缺货时段<spring:message code="message.yanZheng.maoHao"/></label>
                            <div class="col-sm-10 text-left">
                              <label class='checkLong'><input type="radio" id="longTerm" name='isLongterm'  value='1' /><span> 长期</span></label>  &nbsp;
                              <label class='checkLong'><input type="radio" id="shortTerm" name='isLongterm' value='0' /><span> 短期</span></label>
                              <div id='shortTable'  hidden >
                                   <table style="width:180px;"  >
		                             <tr>
		                                <td style="width:50%">
		                                     <input class="form-control" id="starttime" name="startDatetime" type="text"  placeholder="yy-MM-dd"  
     											style='width: 76px;'	onFocus="var endDate=$dp.$('endtime');WdatePicker({maxDate:'#F{$dp.$D(\'endtime\')}'})" value='' />
		                                </td>
		                                <td>&nbsp;-&nbsp;</td>
		                                <td style="width:50%">
		                                   <input class="form-control" id="endtime" name="endDatetime"  type="text"   placeholder="yy-MM-dd" 
		                              			style='width: 76px;'		onFocus="WdatePicker({minDate:'#F{$dp.$D(\'starttime\')}',})" value='' />
		                                </td>
		                              </tr>
		                           </table>
                               </div>
                            </div>
                       </div>
                       <div class="line"></div>
	                   <div class="form-group form-group-xs">
	                        <label class="col-sm-2 text-right">缺货原因<spring:message code="message.yanZheng.maoHao"/></label>
	                        <div class="col-sm-9 text-left">
	                        	   <textarea rows="5"  class=" form-control" name="shortageReason" id="shortageReason" maxlength="2000"></textarea> 
	                        </div>
	                   </div>
                </div>
               <div class="box-footer text-center">
               		<label onclick="return submitForm()" class="btn btn-success btn-sm">申 报</label>
                    <a href="javascript:history.go(-1)" class="btn btn-danger btn-sm"><spring:message code="message.button.getBackSpacing"/></a>
                </div>
            </form>
        </div>
    </section>
</body>
<%@ include file="/WEB-INF/component/commonJS.jsp"%>
<script type="text/javascript">
	$(function(){
		$("input[name='isLongterm']").on('change',function(e){
			var tag = $(this).val();
			if(tag==0){
				$('#shortTable').show();
			}else{
				$('#shortTable').hide();
			}
		});
	})
		function submitForm(){
			if(!valid()){
				return;
			}
	 		$.HN.message.confirm('确定申报吗？', '', '').on(function (e) {
    			if (e) {
    				var postData = formatForm('form');
    	    		$.post("${ctx}/baseShortage/declareShortage.html", postData, function(result) {
    	    			if (result.success) {
    	    				top.$.HN.message.alert("操作成功！", "消息", "success");
    	    				setTimeout(location.href='${ctx}/baseShortage/toBaseGoodsList.html', 1500 );
    	    			} else {
    	    				top.$.HN.message.alert("操作失败！", "消息", "error");
    	    			}
    	    		}, "json")
    			}
    		}); 
		}
	
	function valid(){
			 var count = $('#count').val()
		 if(count==null || count==""){
			 top.$.alert('请输入缺货数量','warn');
			 $('#count').focus();
			 return false;
		 }
 		var isLongterm=$("input[name='isLongterm']:checked").val();
		if(isLongterm==null || isLongterm==""){
			 top.$.alert('请选择缺货时段','warn');
			 return false;
		}
		if($('#shortTerm').is(':checked')){
			var starttime = $('#starttime').val();
			if(starttime==null || starttime==""){
				 top.$.alert('请选择缺货开始日期','warn');
				 $('#starttime').focus();
				 return false;
			}
			var endtime = $('#endtime').val();
			if(endtime==null || endtime==""){
				 top.$.alert('请选择缺货结束日期','warn');
				 $('#endtime').focus();
				 return false;
			}
		} 
		var shortageReason =$('#shortageReason').val();
		if(shortageReason=null || shortageReason==""){
			 top.$.alert('请 输入缺货原因','warn');
			 $('#shortageReason').focus();
			 return false;
		}
		 return true;
	}

</script>
</html>